<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/jstl/fn" prefix="fn"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1 user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>/assets/css/public.css">
<link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
<title>我的资料</title>
<script src="<%=basePath%>/assets/js/jquery-1.8.3.min.js"></script>
<script src="<%=basePath%>/assets/js/fontSize.js"></script>
<link rel="stylesheet" href="<%=basePath%>/assets/imgTools/helmet.css">
<link rel="stylesheet"
	href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="<%=basePath%>/assets/layer/mobile/need/layer.css"
	rel="stylesheet" type="text/css">
<script src="<%=basePath%>/assets/layer/mobile/layer.js"></script>
<script src="<%=path%>/assets2/js/jquery.form.js"></script>
<style>
.content>ul>li {
	border-bottom: 1px solid #f1f1f1;
	height: 0.8rem;
	line-height: 0.8rem;
	font-size: 0.26rem;
	padding: 0 0.2rem;
}

.content>ul>li:first-child {
	height: 1.2rem;
	line-height: 1.2rem
}

.content>ul>li:first-child img {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	margin: 0.1rem 0.5rem
}

.content>ul>li:last-child {
	border-bottom: none
}

.tijiaoanniu button {
	width: 100%;
	margin: 0 0%;
	background: red;
	height: 0.8rem;
	line-height: 0.8rem;
	font-size: 0.3rem;
	text-align: center;
	border: none;
	color: #fff;
	position: fixed;
	bottom: 0
}

.webuploader-element-invisible {
	opacity: 0;
	margin-left: -94px;
	position: absolute;
	width: 60px;
	height: 66px;
}

.selectClass {
	border: none;
	width: 50%;
	margin-left: 16%;
	height: 40px;
	-webkit-appearance: none;
	background-color: #ffffff;
	outline: none;
}

.inputClass {
	border: 0px;
	outline: none;
	cursor: pointer;
	margin-left: 16%;
}
.fa-angle-right{
	float:right;
	line-height:0.8rem;
	font-size: 0.32rem;
	color: #999;
}
</style>
</head>
<body>
	<div class="header">
		<!-- 返回按钮 -->
		<a class=returnInfo href="#" onclick="returnDescend()"><i class="fa fa-angle-left"></i></a> 我的资料
	</div>
	<input type="hidden" id="userId" name="userId" value="${users.userId}">
	<input type="hidden" value="<%=basePath%>" id="basePath">
	<div class="content" style="margin-top: 0.8rem;">
		<ul>
			<li class="clearFirx"><p
					style="height: 1.2rem; line-height: 1.2rem; width: 10%; float: left">头像</p>
				<form role="form" id="fm" action="<%=path%>/app/uploadHeadImg"
					method="post" enctype="multipart/form-data" style="height: 20px;">
					<c:if test="${not empty users.userPhoto}">
						<img
							src="<%=basePath%>app/getGoodsPhotoByName?goodsImage=${users.userPhoto}"
							id="handImdShow1">
					</c:if>
					<c:if test="${empty users.userPhoto}">
						<img src="<%=basePath%>/assets/css/aboutUs/logo.png"
							id="handImdShow2">
					</c:if>
					<input type="file" name="file"
						class="webuploader-element-invisible" multiple="multiple"
						accept="" id="headPhotoUpload">
				</form> <a href="#" class="float_r"> </a></li>

			<li>昵称 <input class="inputClass" value="${users.userName}"
				type="text" onchange="updUserName()" id="userName">
				<i class="fa fa-angle-right"></i>
			</li>
			<li>性别 <select id="sexSelect" class="selectClass"
				onchange="chooseSex()">
					<option value="男" class="optionClass">男</option>
					<option value="女" class="optionClass">女</option>
			</select>
			<i class="fa fa-angle-right"></i>
			</li>
<%-- 			<li>星座 <span style="margin-left: 16%">${users.constellation}</span> --%>
<!-- 				<i class="fa fa-angle-right"></i> -->
<!-- 			</li> -->
<%-- 			<li>生日 <span style="margin-left: 16%">${birthday}</span> <a --%>
<!-- 				href="#" class="float_r"> </a> -->
<!-- 			</li> -->
			<%--         <li>个性签名 &emsp;&emsp;&emsp;${users.userName}<a href="#" class="float_r"> > </a> </li> --%>
			<li>联系方式 <input class="inputClass" value="${users.phone}"
				type="text" id="phone" style="margin-left: 7%;"
				onchange="updPhone()">
				<i class="fa fa-angle-right"></i>
			</li>
		</ul>
	</div>
	<div class="tijiaoanniu">
		<button onclick="outLogin()" style="background-color: #FF3F25;">退出登录</button>
	</div>
</body>
<script>
$(function(){
	var sex = '${users.userSex}';
	$("#sexSelect").val(sex);
	
    //上传图片
    $('#headPhotoUpload').on('change',function(){
 	   var fileName=this.value;
 		while (fileName.indexOf("\\") != -1)
 		{
 	    fileName = fileName.slice(fileName.indexOf("\\") + 1);
 		}
 	    var ext = fileName.slice(fileName.indexOf(".")).toLowerCase();
 	    if(ext.indexOf("png") == -1 && ext.indexOf("jpg") == -1)
 	    {
 	    	layer.open({
			    content: '商品图片格式仅支持PNG、JPG~'
			    ,skin: 'msg'
			    ,time: 2 //2秒后自动关闭
			  });
 	    	return false;
 	    }
 		var objUrl = getObjectURL(this.files[0]);
 		var userPhotoPD= '${users.userPhoto}';
 		if(userPhotoPD!=null&&userPhotoPD!=''){
 			$("#handImdShow1").attr("src",objUrl);
 		}else{
 			$("#handImdShow2").attr("src",objUrl);
 		}
 		if(objUrl!=null){
			  $('#fm').ajaxSubmit({
					beforeSubmit:function(){
						$("#subBtn").unbind("click");
					},success:function(data) { 
					if(data.state==1){
						 layer.open({
	        			    content: '您上传了一张头像~'
	        			    ,skin: 'msg'
	        			    ,time: 2 //2秒后自动关闭
	        			  });
					}else{
						layer.open({
 	 	      			    content: '头像没有上传~'
 	 	      			    ,skin: 'msg'
 	 	      			    ,time: 2 //2秒后自动关闭
 	 	      			  });	
						}
					}
				});
 		}else{
 			layer.open({
			    content: '请选择您的头像上传~'
			    ,skin: 'msg'
			    ,time: 2 //2秒后自动关闭
			  });
 		}
    });
	
});
//弹框选择男女
function chooseSex(){
	var sexValue = $("#sexSelect").val();
	var userId = $("#userId").val();
	var userName = null;
	var phone = null;
	$.ajax({
    	url: $("#basePath").val()+"app/updMyProfile",
        timeout: 300000,
        type: 'post',
        data: {"sexValue":sexValue,"userId":userId,"userName":userName,"phone":phone},
        dataType: 'json',
        success: function (data) {
        	if(data==1){
        		  layer.open({
      			    content: '保存成功'
      			    ,skin: 'msg'
      			    ,time: 2 //2秒后自动关闭
      			  });
        	}else if(data==2){
        	}else{
        		  layer.open({
      			    content: '保存失败'
      			    ,skin: 'msg'
      			    ,time: 2 //2秒后自动关闭
      			  });
        	}
        },error:function (){
        }
	});
};
//修改昵称
function updUserName(){
	var userName = $("#userName").val();
	var userId = $("#userId").val();
	var sexValue = null;
	var phone = null;
	if(userName == null || userName ==''){
		layer.open({
		    content: '昵称不能为空'
		    ,skin: 'msg'
		    ,time: 2 //2秒后自动关闭
		  });
	}else{
		$.ajax({
	    	url: $("#basePath").val()+"app/updMyProfile",
	        timeout: 300000,
	        type: 'post',
	        data: {"sexValue":sexValue,"userId":userId,"userName":userName,"phone":phone},
	        dataType: 'json',
	        success: function (data) {
	        	if(data==1){
	        		  layer.open({
	        			    content: '保存成功'
	        			    ,skin: 'msg'
	        			    ,time: 2 //2秒后自动关闭
	        			  });
	        	}else{
	        		  layer.open({
	        			    content: '保存失败'
	        			    ,skin: 'msg'
	        			    ,time: 2 //2秒后自动关闭
	        			  });
	        	}
	        },error:function (){
	        }
		});
	}
};
//修改电话号码
function updPhone(){
	var phone = $("#phone").val();
	var userId = $("#userId").val();
	var sexValue = null;
	var userName = null;
	if(phone.match(/^1[3|4|5|6|7|8][0-9]\d{4,8}$/)==null){
		  layer.open({
			    content: '请输入合法的电话号码'
			    ,skin: 'msg'
			    ,time: 2 //2秒后自动关闭
			  });
		return false;
	}else{
		$.ajax({
	    	url: $("#basePath").val()+"app/updMyProfile",
	        timeout: 300000,
	        type: 'post',
	        data: {"sexValue":sexValue,"userId":userId,"userName":userName,"phone":phone},
	        dataType: 'json',
	        success: function (data) {
	        	if(data==1){
	        		  layer.open({
	        			    content: '保存成功'
	        			    ,skin: 'msg'
	        			    ,time: 2 //2秒后自动关闭
	        			  });
	        	}else{
	        		  layer.open({
	        			    content: '保存失败'
	        			    ,skin: 'msg'
	        			    ,time: 2 //2秒后自动关闭
	        			  });
	        	}
	        },error:function (){
	        }
		});
	}
};
	//退出登录
	function outLogin(){
		window.location.href="<%=basePath%>app/app_j_spring_security_logout";
	};
	//返回上一层
	function returnDescend() {
		window.history.go(-1);
	};
	//建立一個可存取到該file的url  
	function getObjectURL(file) {
		var url = null;
		// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已  
		if (window.createObjectURL != undefined) { // basic  
			url = window.createObjectURL(file);
		} else if (window.URL != undefined) { // mozilla(firefox)  
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL != undefined) { // webkit or chrome  
			url = window.webkitURL.createObjectURL(file);
		}
		return url;
	}
</script>
</html>